<template>
  <el-button type="primary" size="small" @click="handleFirstPlus()"
    >添加一级分类</el-button
  >
  <el-table :data="tableData" :border="true" style="width: 100%">
    <el-table-column fixed="right" type="expand" label="展开" width="200px">
      <template #default="props">
        <div m="4">
          <el-button
            type="primary"
            size="small"
            @click="handleSecondPlus(props.row.classificationFirst.id)"
            >添加二级分类</el-button
          >
          <el-table
            :data="props.row.classificationSecondList"
            :border="true"
            width="200px"
          >
            <el-table-column label="二级标签" prop="title" />
            <el-table-column fixed="right" label="操作" width="200px">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleSecondEdit(scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleSecondDelete(scope.row.id)"
                  >删除</el-button
                >
                <!-- <el-button
                  link
                  type="primary"
                  size="small"
                  @click="handleSecondPlus()"
                  >添加</el-button
                > -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="ID" prop="classificationFirst.id" width="200px" />
    <el-table-column
      label="一级标签"
      prop="classificationFirst.title"
      width="200px"
    />

    <el-table-column fixed="right" label="操作" min-width="120px">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click="handleFirstEdit(scope.row.classificationFirst)"
        >
          编辑
        </el-button>
        <el-button
          link
          type="primary"
          size="small"
          @click="handleFirstDelete(scope.row.classificationFirst.id)"
          >删除</el-button
        >
        <!-- <el-button link type="primary" size="small" @click="handleFirstPlus()"
          >添加</el-button
        > -->
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
    v-model="plusDialog.isVisible"
    :title="plusDialog.title"
    align-center
  >
    <el-form label-width="200px" label-position="left">
      <el-form-item label="请输入二级分类名称">
        <el-input v-model="plusForm.title" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <!-- <el-button @click="centerDialogVisible = false">Cancel</el-button> -->
        <el-button type="primary" @click="savePlus"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
    v-model="editDialog.isVisible"
    :title="editDialog.title"
    align-center
  >
    <el-form label-width="200px" label-position="left">
      <el-form-item label="请输入分类名称">
        <el-input v-model="editForm.title" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <!-- <el-button @click="centerDialogVisible = false">Cancel</el-button> -->
        <el-button type="primary" @click="saveEdit"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import {
  getAllCategory,
  firstDeleteByUserId,
  firstAdd,
  firstEdit,
  secondDeleteByUserId,
  secondAdd,
  secondEdit,
} from "@/apis/admin/category";

import { classificationSecondPage } from "@/apis/admin/classificationSecond";

import { classificationFirstPage } from "@/apis/admin/classificationFirst";

import { Delete, Edit, Plus, Search } from "@element-plus/icons-vue";
import { getFormatTime } from "@/apis/utility";

// 存储表格数据的变量
const tableData = ref([]);

/**
 * 分页查询
 * @param {*} filter 过滤
 * @param {*} search 搜索
 * @param {*} orders 排序
 */
const getPage = async () => {
  getAllCategory().then((result) => {
    tableData.value = result.data;
    console.log(result);
  });
};

/**
 * 添加表格数据
 */
const plusForm = ref({});

/**
 * 添加对话框
 */
const plusDialog = reactive({
  isVisible: false,
  title: "",
});

/**
 * 修改表格数据
 */
const editForm = ref({});

/**
 * 修改对话框
 */
const editDialog = reactive({
  isVisible: false,
  title: "",
});

// 生命周期
onMounted(() => {
  // 页面加载的时候立刻执行一次请求
  getPage();
});

// 保存
const savePlus = async () => {
  // console.log(editChange);
  if (addChange.tag == "first") {
    await commitFirstPlusRow(plusForm.value);
  } else {
    await commitSecondPlusRow(plusForm.value);
  }
  plusDialog.isVisible = false;
  plusForm.value = {}
};
const saveEdit = async () => {
  if (editChange.tag == "first") {
    await commitFirstEditRow(editForm.value);
  } else {
    await commitSecondEditRow(editForm.value);
  }
  editDialog.isVisible = false;
  editForm.value = {}
};

const addChange = reactive({});

const editChange = reactive({});

// 表格数据

// 编辑数据
const handleFirstEdit = async (row) => {
  // console.log(row);
  editDialog.isVisible = true;
  editDialog.title = "编辑一级分类名称";
  editForm.value = row;
  editChange.tag = "first";
};

const commitFirstEditRow = async (row) => {
  await firstEdit(row).then((result) => {
    console.log(result);
  });
  getPage();
};

// 添加数据
const handleFirstPlus = async () => {
  // console.log(row);
  plusDialog.isVisible = true;
  plusDialog.title = "添加一级分类名称";
  addChange.tag = "first";
};

const commitFirstPlusRow = async (row) => {
  await firstAdd(row).then((result) => {
    console.log(result);
  });
  getPage();
};

// 删除数据
const handleFirstDelete = async (id) => {
  console.log(id);
  await firstDeleteByUserId(id).then((result) => {
    console.log(result);
  });
  getPage();
};

// 编辑数据
const handleSecondEdit = async (row) => {
  console.log(row);
  editDialog.isVisible = true;
  editDialog.title = "编辑二级分类名称";
  editChange.tag = "second";
  editForm.value = row;
};

const commitSecondEditRow = async (row) => {
  await secondEdit(row).then((result) => {
    console.log(result);
  });
  getPage();
};

// 删除数据
const handleSecondDelete = async (id) => {
  console.log(id);
  await secondDeleteByUserId(id).then((result) => {
    console.log(result);
  });
  getPage();

};
// 添加数据
const handleSecondPlus = async (row) => {
  console.log(row);
  plusForm.value.classificationFirstId = row;
  plusDialog.isVisible = true;
  plusDialog.title = "添加二级分类名称";

  addChange.tag = "second";
};

const commitSecondPlusRow = async (row) => {
  await secondAdd(row).then((result) => {
    console.log(result);
  });
  getPage();
};
</script>

<style scoped>
.toolbar {
  padding-bottom: 20px;
  display: flex;
}

.filter {
  display: flex;
  margin-bottom: 20px;
}
.el-input,
.el-select {
  max-width: 250px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
}
.el-table {
  height: calc(100vh);
}
.el-form {
  padding: 20px 40px;
}

.el-table .el-table__expand-column {
  width: 200px;
}

</style>
